{include file="public/header-static"/} {include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="calendar" id="calendar" style="display: none;">
            <div class="content">
                <div class="head">
                    <div class="image">
                        <img src="__STATIC__/assets/media/image/calendarIcon.png" style="height: 190px;width: 249px;" alt="">
                    </div>
                    <div class="month">
                        <span style="cursor: pointer;" onclick="changeDayArr('-')"><</span>
                        <span id="month"></span>
                        <span style="cursor: pointer;" onclick="changeDayArr('+')">></span>
                    </div>
                </div>
                <div class="dayArr">
                    <div class="dayName">
                        <span>周日</span>
                        <span>周一</span>
                        <span>周二</span>
                        <span>周三</span>
                        <span>周四</span>
                        <span>周五</span>
                        <span>周六</span>
                    </div>
                    <div class="dayNum" id="dayArr">
                        <ul></ul>
                    </div>
                    <div class="button">
                        <span onclick="changeDate(2)">确认</span>
                    </div>

                </div>
            </div>
        </div>

        <div class="container">
            <div class="title">
                <div class="list-title" style="margin-bottom: 10px;">
                    {include file="marketing/title"/}
                </div>
                <i style="display: block">
                    <img style="width: 28px; height: 28px;cursor: pointer;" onclick="changeDate(1)"
                         src="__STATIC__/assets/media/image/calendar.png">
                </i>
            </div>

            <div class="row" id="allData">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 45px ) ;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">用户数据</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <i class="icon"></i>
                                                    <text class="str">用户总数</text>
                                                </div>
                                                <div class="bg-str" style="margin-left: 15px;">
                                                    {$viewData.users.totalUsers}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <i class="icon" style="background-color: #F74AFFFF;"></i>
                                                    <text class="str">部门直属人数</text>
                                                </div>
                                                <div class="bg-str" style="margin-left: 15px;">
                                                    {$viewData.users.underUsers.underNums} <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                                    <div id="omitBox" class="omitBox">
                                                        {volist name="viewData.users.underUsers.usersList" id="vo"}
                                                        <text class="omitData">{$vo.name}：{$vo.usersNums}</text> {/volist}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="str">其他来源</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$viewData.users.otherUsers.sourceNums} <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                                    <div id="omitBox" class="omitBox2" style="padding-left: 5px;">
                                                        {volist name="viewData.users.otherUsers.usersList" id="vo"}
                                                        <text class="omitData">{$vo.source}：{$vo.usersNums}</text> {/volist}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="allUserData"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="margin-bottom: 16px;">
                                <div class="card-dth">
                                    <div class="totalDataTitle">
                                        <div class="item">
                                            <p>部门总营业额</p>
                                            <span>{$viewData.under.totalPrice}</span>
                                        </div>
                                        <div class="item">
                                            <p>提成点</p>
                                            <span>{$viewData.under.commission_ratio}</span>
                                        </div>
                                        <div class="item">
                                            <p>所得佣金</p>
                                            <span>{$viewData.under.commission}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card bor" style="height: calc( 100% - 166px ) ;">
                                <div class="card-dth2">
                                    <div class="user">
                                        <div class="user-name" style="margin-top: 10px;">部门总营业额</div>
                                    </div>
                                    <canvas id="findResource" style="margin: auto;"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="middleData" style="opacity: 0;height: 0;width: 100%;margin: 0px 15px 15px;" id="middleData">
                    {include file="marketing/middle"/}
                </div>

                {in name="userRole" value="1,6"}
                <div class="row" id="hiddenData" style="display: none;width: 100%;margin: 0 15px;">
                    <div class="">
                        <div class="row">
                            <!--  下单地区分布 start-->
                            <div class="col-md-6">
                                <div class="card bor" style="height: calc(  100% -  1.875rem );">
                                    <div class="card-dth positionBox">

                                        {if $viewData.areaData.lastData}
                                            <div class="pullDown1" onclick="pullDown1()"></div>
                                            <div class="pullDownText1 pullDownText" onclick="pullDown1()">展开全部</div>
                                        {/if}

                                        <div class="user-name" style="text-align: left;">
                                            下单地区分布
                                        </div>
                                        <div class="" style="display: flex;justify-content: center;">
                                            <!-- <canvas id="cityData" width="600" height="282.5"></canvas> -->
                                            <canvas id="cityData"></canvas>

                                        </div>
                                            <div id="dataArr1" style="margin: 10px; padding-top: 15px;visibility: hidden;height: 0;">
                                                <div class="dataRow">

                                                    {volist name="viewData.areaData.lastData" id="vo"}
                                                    <span>
                                                        <p>{$vo.name}</p>
                                                        <p>{$vo.nums}</p>
                                                    </span>
                                                    {/volist}

                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                            <!--  下单地区分布 end-->

                            <!--  下单身份数据 start-->
                            <div class="col-md-6">
                                <div class="card bor" style="height: calc(  100% -  1.875rem );">
                                    <div class="card-dth positionBox">
                                        <div class="user-name" style="text-align: left;">
                                            下单身份数据
                                        </div>
                                        <div>
                                            <input id="datas1" type="hidden" value="{$viewData.identityData.nameArr}" name="datas1">
                                            <canvas id="businessData" width="500" height="282.5"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  下单身份数据 end-->

                        </div>

                    </div>
                </div>
                {/in}

                <div class="middleRow" style="margin-top: -20px;">
                    <div class="pullDown" onclick="pullDown()"></div>
                    <div class="pullDownText3 pullDownText" onclick="pullDown()">展开</div>
                </div>

                <input id="datas" type="hidden" value="{$viewData.areaData.datas}" name="datas">

                <div class="list" style="width: 100%;margin: 0 15px;">
                    <div class="list-title">
                        <div class="item activeBtn" onclick="add(2,this)">创建活动</div>
                        <!--					<div class="item additem activeBtn" onclick="changeList(1,this)">直属用户</div>-->
                        <!--				    <div class="item additem activeBtn" onclick="changeList(1,this)">活动记录</div>-->
                    </div>


                    <div class="app-block">
                        <div class="app-content">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <table id="linkstable" lay-filter="linkstable"></table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="rowTable" style="display: none;">
                        <div class="row" id="tableContent">
                            <div class="list-title myUsers" style="padding-left: 15px;">
                                <div class="item activeBtn" myUsersType="0" onclick="marketingUsers(0)">新用户</div>
                                <div class="item" myUsersType="1" onclick="marketingUsers(1)">转换用户</div>
                            </div>
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="rowTable" lay-filter="rowTable"></table>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        {include file="public/footer"/}
    </div>
    <script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
    <script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
    <script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
    <script src="__STATIC__/assets/js/examples/dashboard.js"></script>
    <script src="__STATIC__/assets/js/examples/echarts.js"></script>
    <script src="__STATIC__/assets/js/custom.js"></script>
    {include file="marketing/script"/}
    <script>
        $(".calendar").click(function(event) {
            event.stopPropagation(); //  阻止事件冒泡
            $('.calendar').css('display', 'none')
        });
        $(".calendar .content").click(function(event) {
            event.stopPropagation(); //  阻止事件冒泡
        });

        function changeDate(params) {
            if (params == 1) {
                $('#calendar').css('display', 'flex')
            } else {
                $('#calendar').css('display', 'none')
            }
        }

        function changeDayArr(params) {

            let month = $('#month').text().split('月')[0]
            console.log(month);
            if (params == '-' && month != 1) {
                month--
                getCalendarData(month)
            } else if (params == '+' && month != 12) {
                month++
                getCalendarData(month)
            }
        }

        function getCalendarData(_month) {
            let date = new Date();
            let year = date.getFullYear();
            // let month = date.getMonth()+1;

            // $('#month').text(`${month}月`)

            let month
            if (_month) {
                month = _month
            } else {
                month = date.getMonth() + 1;
            }


            $('#month').text(`${month}月`)

            // let d = new Date(year, month, 0);
            let monthDayNum = new Date(year, month, 0).getDate();
            // console.log(`当月天数${monthDayNum}`);

            // 上个月余数
            let lastMonthDayNum = new Date(year, month - 1, 0).getDate();
            // console.log(`上月天数${lastMonthDayNum}`);

            let adyArr = []

            for (let index = 1; index < monthDayNum + 1; index++) {
                let day = {
                    val: index,
                    thisMonth: true
                }
                adyArr.push(day)
                    // adyArr.push(index)
            }


            let monthFirtDay = new Date(`${year}/${month}/1`).getDay()
                // console.log(`当月1号星期${monthFirtDay}`);

            let lastMonthResidue = 0
            if (monthFirtDay == 0) {
                // 上个月没有剩余天数
            } else {
                lastMonthResidue = 7 - (7 - monthFirtDay)
                for (let index = lastMonthDayNum; index > lastMonthDayNum - lastMonthResidue; index--) {
                    let day = {
                        val: index,
                        thisMonth: false
                    }
                    adyArr.unshift(day)
                        // adyArr.unshift(index)
                }
            }

            let monthLastDay = new Date(`${year}/${month}/${monthDayNum}`).getDay()
                // console.log(`当月${monthDayNum}号星期${monthLastDay}`);

            // 下个月余数
            let naxtMonthDayNum = new Date(year, month - 1, 0).getDate();
            // console.log(`上月天数${lastMonthDayNum}`);

            let naxtMonthResidue = 0
            if (monthLastDay == 6) {
                // 下个月没有剩余天数
            } else {
                naxtMonthResidue = 7 - (monthLastDay + 1)
                for (let index = 1; index < naxtMonthResidue + 1; index++) {
                    let day = {
                        val: index,
                        thisMonth: false
                    }
                    adyArr.push(day)
                        // adyArr.push(index)
                }
            }

            $('#dayArr ul li').remove()
            adyArr.forEach((item) => {

                    if (item.thisMonth) {
                        $('#dayArr ul').append(`<li>${item.val}</li>`)
                    } else {
                        $('#dayArr ul').append(`<li style="opacity: 0.5;">${item.val}</li>`)
                    }
                })
                // console.dir(adyArr);

            // return d.getDate();
        }

        getCalendarData()


        // 创建活动
        function add() {
            window.location.href = '{:url("/marketing/marketingAdd")}';
        }

        // 创建活动
        function edit(id) {
            window.location.href = '{:url("/marketing/marketingEdit")}?id=' + id;
        }

        // 创建活动
        function see(id) {
            window.location.href = '{:url("/marketing/marketingShow")}?id=' + id;
        }

        // 活动列表
        var mid = 0;
        layui.use('table', function() {
            var table = layui.table,
                form = layui.form;
            // 表格初始化
            table.render({
                elem: '#linkstable',
                skin: 'line' //行边框风格
                    ,
                even: true //开启隔行背景
                    ,
                url: '{:url("/marketing/index")}',
                method: 'post',
                page: true //开启分页
                    ,
                cols: [
                    [{
                        field: 'title_data',
                        title: '二维码/标题/地区'
                    }, {
                        field: 'ids',
                        title: '序号/预算'
                    }, {
                        field: 'type_data',
                        title: '类型/经办人'
                    }, {
                        field: 'time_data',
                        title: '开始/结束时间'
                    }, {
                        field: 'users_data',
                        title: '新用户/转换人数',
                        event: 'clickUsers_data',
                        style: 'cursor: pointer'
                    }, {
                        field: 'price_data',
                        title: '消费金额/佣金'
                    }, {
                        field: 'rightbtn',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo'
                    }]
                ],
                done: function(res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');

                    $('td[data-field="users_data"]').attr('title', '点我查看用户列表');
                },
                parseData: function(res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list
                    };
                }
            });

            table.on('tool(linkstable)', function(obj) {
                let event = obj.event;
                // console.log(obj);
                var datas = obj.data;
                // 用户列表
                if (event === "clickUsers_data") {
                    $('.rowTable').css('display', 'flex');
                    mid = datas.id;
                    marketingUsers(0);
                }
            });
        });


        function pullDown() {
            if ($('.pullDownText3').text() == '收起') {
                $('.pullDownText3').text('展开')
                $('#middleData').css('opacity', 0)
                $('#middleData').css('height', 0)
                $('#hiddenData').css('display', 'none')
                $('.middleRow .pullDown').css('right', '48%')
                $('.middleRow .pullDown').css('bottom', '22%')
                $('.middleRow .pullDown').css('transform', 'rotate(180deg)')
            } else if ($('.pullDownText3').text() == '展开') {
                $('.pullDownText3').text('收起')
                $('#middleData').css('opacity', 1)
                $('#middleData').css('height', '100%')
                $('#hiddenData').css('display', 'block')

                $('.middleRow .pullDown').css('right', '49.5%')
                $('.middleRow .pullDown').css('bottom', '170%')
                $('.middleRow .pullDown').css('transform', 'rotate(0deg)')
            }
        }


        function omitBoxClick(e) {
            let val = $(e).next().css('opacity')
            if (val == 0) {
                $(e).next().css('opacity', '1')
            } else if (val == 1) {
                $(e).next().css('opacity', '0')
            }
        }


        function pullDown1() {
            if ($('.pullDownText1').text() == '收起') {
                $('#dataArr1').css('visibility', 'hidden')
                $('#dataArr1').css('height', '0')
                $('.pullDownText1').text('展开全部')
                $('.positionBox .pullDown1').css('right', '2%')
                $('.positionBox .pullDown1').css('bottom', '3%')
                $('.positionBox .pullDown1').css('transform', 'rotate(180deg)')
            } else if ($('.pullDownText1').text() == '展开全部') {
                $('#dataArr1').css('visibility', 'visible')
                $('#dataArr1').css('height', '100%')
                $('.pullDownText1').text('收起')
                $('.positionBox .pullDown1').css('right', '4%')
                $('.positionBox .pullDown1').css('bottom', '7.5%')
                $('.positionBox .pullDown1').css('transform', 'rotate(0deg)')
            }
        };

        function pullDown2() {
            if ($('.pullDownText2').text() == '收起') {
                $('#dataArr2').css('visibility', 'hidden')
                $('#dataArr2').css('height', '0')
                $('.pullDownText2').text('展开全部')
            } else if ($('.pullDownText2').text() == '展开全部') {
                $('#dataArr2').css('visibility', 'visible')
                $('#dataArr2').css('height', '100%')
                $('.pullDownText2').text('收起')
            }
        };
    </script>

    <script>
        window.onresize = function() {
                resizeMyChartContainer();
                myChart1.resize();
                resizeMyChartContainer6();
                myChart6.resize();
            }
            // 用户数据
        var chartDom1 = document.getElementById('allUserData');
        var resizeMyChartContainer = function() {
            let domWidth = $('.card-dth').width();
            chartDom1.style.width = domWidth + 'px';
            chartDom1.style.height = (domWidth / 2) - 155 + 'px';
        };
        resizeMyChartContainer();
        let labels = "{$viewData.users.usersMonthLine.labels}";
        let datas = "{$viewData.users.usersMonthLine.datas}";
        let datas1 = "{$viewData.users.marketingUsersMonthLine.datas}";
        let dataDay = labels.split(',');
        let dataValue = datas.split(',');
        let dataValue1 = datas1.split(',');
        var myChart1 = echarts.init(chartDom1);
        var option;
        option = {
            title: {
                // text: '堆叠区域图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: dataDay,
                gridLines: {
                    display: false
                },
                //y轴刻度
                axisTick: {
                    show: false
                },
                //y轴刻度标签数字
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#8557C3FF' //y轴标签颜色
                    }
                },
            }],
            yAxis: [{
                type: 'value'
            }],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '6%',
                top: '8%',
                containLabel: true
            },
            series: [{
                    // name: '需求总数\n{c|{}}',
                    type: 'line',
                    // stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#406CE5FF'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#F2FBFFFF',
                        } //改变区域颜色
                    },
                    data: dataValue,
                }, {
                    // name: '当月新增\n{c|{}}',
                    type: 'line',
                    // stack: '总量',
                    areaStyle: {},
                    itemStyle: {
                        normal: {
                            color: '#FF00FFFF'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#F9F6FFFF',
                        } //改变区域颜色
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: dataValue1
                },
                // {
                //     name: '当日新增\n{c|{}}',
                //     type: 'line',
                //     stack: '总量',
                //     areaStyle: {},
                //     itemStyle: {
                //         normal: {
                //             color: '#E6A500FF'
                //         }
                //     },
                //     areaStyle: {
                //         normal: {color: '#F9F6FFFF',}//改变区域颜色
                //     },
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     data: []
                // },

            ]
        };
        option && myChart1.setOption(option);
        myChart1.resize();

        // 下单地区分布
        var str = $('#datas').val().split(';');
        var arr = [];
        for (var i in str) {
            // 转换成对象
            var obj = eval('(' + str[i] + ')');
            console.log(obj);
            arr.push(obj)
        }
        console.log(arr);
        var chartDom6 = document.getElementById('cityData');
        var resizeMyChartContainer6 = function() {
            let domWidth = $('.middleData').width();
            // console.log(domWidth);
            // console.log(123);
            chartDom6.style.width = (domWidth / 3) + 'px';
            chartDom6.style.height = (domWidth / 5) < 240 ? 240 : (domWidth / 5) + 'px';
            // console.log(chartDom6.style.height);
        };
        resizeMyChartContainer6();
        var myChart6 = echarts.init(chartDom6);
        var option6 = {
            title: '',
            tooltip: {
                trigger: 'item'
            },
            //   legend: {
            // 	top: '20%',
            // 	left: '75%',
            // },
            color: ['#f24f21', '#5c78ff', '#fd6263', '#4e1ef2', '#f8ab18'], //手动设置每个图例的颜色
            //环形中间文字
            graphic: [
                //第一行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '48%',
                    top: '40%',
                    style: {
                        //value当前进度
                        text: "{$viewData.areaData.totalArea}",
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 34,
                        fontWeight: 'bold'
                    }
                },
                //第二行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '45%',
                    top: '56%',
                    style: {
                        //maxValue进度条最大值
                        text: '热门地区',
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 16
                    }
                }
            ],
            series: [ //系列列表
                {
                    // name: '设备状态',  //系列名称
                    type: 'pie', //类型 pie表示饼图
                    radius: ['65%', '75%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    center: ['50%', '50%'], //控制饼图位置
                    itemStyle: { //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: { //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: { //标签的视觉引导线样式
                                show: false //平常不显示
                            }
                        },

                    },
                    label: {
                        normal: {
                            show: true, //展示
                            position: 'outside', // outside表示文本显示位置为外部
                            textStyle: {
                                // color: ['#f24f21', '#5c78ff', '#fd6263', '#4e1ef2', '#f8ab18'],  //手动设置每个图例的颜色
                            }
                        },
                        emphasis: { //文本样式
                            show: true, //展示
                            textStyle: { //文本样式
                                fontSize: '14',
                                fontWeight: '600',
                            },
                        }
                    },
                    labelLine: { //引导线设置
                        normal: {
                            show: true, //引导线显示
                            length: 25,
                        }
                    },
                    data: arr,
                }
            ]
        };
        myChart6.resize();
        myChart6.setOption(option6);

        // 下单身份数据
        var chartDom = document.getElementById('businessData');
        var str1 = $('#datas1').val().split(';');
        var arr1 = [];
        for (var ii in str1) {
            // 转换成对象
            var obj1 = eval('(' + str1[ii] + ')');
            console.log(obj1);
            arr1.push(obj1)
        }
        console.log(str1, arr1);
        var arr2 = arr1.splice(4, 7)
        var myChart = echarts.init(chartDom);
        var option = {
            title: '',
            tooltip: {
                trigger: 'item'
            },
            legend: [{
                top: 'center',
                icon: 'circle',
                left: '55%',
                data: arr1,
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    rich: {
                        a: {
                            color: '#2F3133FF',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                            color: '#2F3133FF'
                        }
                    }
                }
            }, {
                top: 'center',
                icon: 'circle',
                left: '75%',
                data: arr2,
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    // fontSize: 16,
                    // height:40,
                    rich: {
                        a: {
                            // color: '#999',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                        }
                    }
                }
            }, ],
            //环形中间文字
            graphic: [
                //第一行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '28%',
                    top: '40%',
                    style: {
                        //value当前进度
                        text: "{$viewData.identityData.valueNums}",
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 34,
                        fontWeight: 'bold'
                    }
                },
                //第二行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '24%',
                    top: '56%',
                    style: {
                        //maxValue进度条最大值
                        text: '身份数据',
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 16
                    }
                }
            ],
            series: [ //系列列表
                {
                    name: '设备状态', //系列名称
                    type: 'pie', //类型 pie表示饼图
                    radius: ['55%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    center: ['30%', '50%'], //控制饼图位置
                    itemStyle: { //图形样式

                        //  emphasis:{
                        // shadowBlur: 10 ,
                        // shadowOffsetX: 0 ,
                        // shadowColor: '#fff'
                        //  },
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            borderWidth: 5, //宽度
                            borderColor: '#fff',
                            label: { //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: { //标签的视觉引导线样式
                                show: false //平常不显示
                            }
                        },

                    },
                    label: {
                        normal: {
                            show: false, //展示
                            position: 'outside', // outside表示文本显示位置为外部
                            textStyle: {}
                        },
                        //  emphasis: {    //文本样式
                        //      show: true,    //展示
                        //      textStyle: {    //文本样式
                        //          fontSize: '14',
                        //          fontWeight: '600',
                        //      }
                        //   }
                    },
                    labelLine: { //引导线设置
                        //     normal: {
                        //          show: true,   //引导线显示
                        // length: 40 ,
                        //     }
                    },
                    data: [...arr1, ...arr2],
                }, {
                    name: '', //系列名称
                    type: 'pie', //类型 pie表示饼图
                    radius: ['45%', '52%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    center: ['30%', '50%'], //控制饼图位置
                    itemStyle: { //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            borderWidth: 5, //宽度
                            borderColor: '#fff',
                            label: { //饼图图形上的文本标签
                                // show: false  //平常不显示
                            },
                            labelLine: { //标签的视觉引导线样式
                                show: false //平常不显示
                            }
                        },

                    },
                    label: {
                        normal: {
                            show: false, //展示
                            position: 'outside', // outside表示文本显示位置为外部
                        },
                    },
                    data: [{
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        },


                    ],
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <style>
        .layui-table {
            width: 100%;
        }
        
        .calendar {
            position: fixed;
            top: 0;
            right: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, .3);
            z-index: 999;
        }
        
        .calendar .content {
            width: 500px;
            background-color: #fff;
            border-radius: 20px 20px 10px 10px;
        }
        
        .calendar .content .head {
            padding: 15px;
            display: flex;
            align-items: center;
        }
        
        .calendar .content .head .month {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            height: 100%;
            font-size: 22px;
            color: #457BFFFF;
        }
        
        .calendar .content .dayArr {
            background-color: #EFF5FFFF;
            height: calc(100% - 220px);
            width: 100%;
            border-radius: 0px 0px 10px 10px;
        }
        
        .calendar .content .dayArr .button {
            display: flex;
            justify-content: center;
            padding-bottom: 10px;
        }
        
        .calendar .content .dayArr .button span {
            width: 108px;
            height: 32px;
            font-size: 16px;
            background-color: #3F6EFFFF;
            color: #fff;
            display: grid;
            place-items: center;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .calendar .content .dayArr .dayName {
            display: flex;
            width: 96%;
            margin: auto;
            padding-top: 15px;
        }
        
        .calendar .content .dayArr .dayName span {
            flex: 1;
            display: flex;
            justify-content: center;
        }
        
        .calendar .content .dayArr .dayNum ul {
            display: flex;
            flex-wrap: wrap;
            margin: 0 10px;
        }
        
        .calendar .content .dayArr .dayNum ul li {
            width: 14.2%;
            color: #457BFFFF;
            padding: 20px 0;
            display: flex;
            font-size: 16px;
            justify-content: center;
        }
        
        .rowTable {
            position: fixed;
            top: 0;
            right: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, .3);
            z-index: 999;
        }
        
        .rowTable .row {
            width: 70%;
            height: 60%;
            overflow-y: scroll;
            background: #fff;
            padding: 20px;
            position: relative;
        }
        
        .rowTable .row .button {
            padding: 10px;
            color: #fff;
            background-color: #3F6EFFFF;
            position: absolute;
            top: 0;
            right: -45px;
            z-index: 99;
            cursor: pointer;
        }
        
        .title {
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }
        
        .dataRow {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            width: 100%;
        }
        
        .dataRow span {
            display: block;
            width: 20%;
        }
        
        .positionBox {
            position: relative;
        }
        
        .positionBox .pullDown1 {
            position: absolute;
            right: 2%;
            bottom: 3%;
            transform: rotate(180deg);
            cursor: pointer;
        }
        
        .positionBox .pullDownText {
            position: absolute;
            right: 6%;
            bottom: 3.5%;
            color: #5C5E66FF;
            cursor: pointer;
        }
        
        .pullDown1:before,
        .pullDown1:after {
            position: absolute;
            content: '';
            border-top: 10px transparent dashed;
            border-left: 10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px #fff solid;
        }
        
        .pullDown1:before {
            border-bottom: 10px #898A8FFF solid;
        }
        
        .pullDown1:after {
            top: 2px;
            /*覆盖并错开1px*/
            border-bottom: 10px #fff solid;
        }
        
        .positionBox1 {
            position: relative;
        }
        
        .positionBox1 .pullDown1 {
            position: absolute;
            right: -35%;
            top: 115%;
            transform: rotate(180deg);
            cursor: pointer;
        }
        
        .pullDown1:before,
        .pullDown1:after {
            position: absolute;
            content: '';
            border-top: 7px transparent dashed;
            border-left: 7px transparent dashed;
            border-right: 7px transparent dashed;
            border-bottom: 7px #fff solid;
        }
        
        .pullDown1:before {
            border-bottom: 7px #5C5F66FF solid;
        }
        
        .pullDown1:after {
            top: 2px;
            border-bottom: 7px #fff solid;
        }
        
        .middleData {
            display: flex;
            margin-bottom: 15px;
        }
        
        .middleData .middleItem {
            flex: 1;
            background-color: #fff;
            margin-right: 15px;
            border-radius: 8px;
        }
        
        .middleData .middleItem:nth-child(3) {
            margin-right: 0;
        }
        
        .middleRow {
            position: relative;
            width: 100%;
            height: 20px;
        }
        
        .middleRow .pullDown {
            position: absolute;
            transform: translate(-50%, -50%);
            right: 48%;
            bottom: 22%;
            transform: rotate(180deg);
            /* right: 49.5%;
            bottom: 170%;
            transform: rotate(0deg); */
            cursor: pointer;
        }
        
        .middleRow .pullDownText {
            position: absolute;
            right: 50%;
            bottom: 50%;
            color: #5C5E66FF;
            cursor: pointer;
        }
        
        .pullDown:before,
        .pullDown:after {
            position: absolute;
            content: '';
            border-top: 10px transparent dashed;
            border-left: 10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px #fff solid;
        }
        
        .pullDown:before {
            border-bottom: 10px #898A8FFF solid;
        }
        
        .pullDown:after {
            top: 2px;
            /*覆盖并错开1px*/
            border-bottom: 10px #f1f2f7 solid;
        }
        
        .findResource-legend {
            margin-right: 50px;
        }
        
        .totalDataTitle {
            display: flex;
            justify-content: space-evenly;
            height: 90px;
        }
        
        .totalDataTitle .item {
            margin-top: 20px;
        }
        
        .totalDataTitle .item p {
            color: #999999FF;
        }
        
        .totalDataTitle .item span {
            font-size: 24px;
            color: #E6A500FF;
        }
        
        .totalDataTitle .item:nth-child(1) span {
            color: #5B78FFFF;
        }
        
        .u-left {
            margin-right: 98px;
        }
        
        .icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #5B78FFFF;
        }
        
        .omitBox,
        .omitBox2 {
            opacity: 0;
            position: absolute;
            top: 135%;
            left: -76%;
            width: 126px;
            height: 145px;
            background-color: #fff;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;
        }
        
        .omitBox:before {
            content: '';
            position: absolute;
            top: -7%;
            right: 23%;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 11px solid #f3f3f3;
        }
        
        .omitBox2:before {
            content: '';
            position: absolute;
            top: -7%;
            right: 7%;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 11px solid #f3f3f3;
        }
        
        .omitBox text,
        .omitBox2 text {
            font-weight: 0;
            font-size: 16px;
            color: #9D9D9DFF;
        }
    </style>
    <style>
        .activeBtn {
            color: #fff !important;
            background-color: #3F6EFFFF !important;
        }
        
        .list-title {
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .list-title .item {
            font-size: 14px;
            border-radius: 3px;
            background-color: #B9B9B9;
            display: grid;
            place-items: center;
            margin-right: 45px;
            cursor: pointer;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            padding-right: 10px;
        }
        /* .list-title .item:nth-child(3) {
            border: 1px solid #3F6EFFFF;
            color: #3F6EFFFF;
            background-color: #fff;
        } */
        
        .box-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .box-bottom .bt-item {
            width: 47%;
            background-color: #FDFBF2FF;
            margin: 5px;
            height: 77px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        
        .box-bottom .bt-item .title {
            color: #666666FF;
            font-size: 16px;
            align-self: flex-start;
        }
        
        .box-bottom .bt-item span {
            color: #0DA877FF;
            font-size: 18px;
        }
        
        .box-bottom .bt-item strong {
            margin-left: 30px;
            font-size: 22px;
        }
        
        .box-bottom .bt-item:nth-child(2) strong {
            margin-left: 15px;
        }
        
        .d-center {
            display: flex;
        }
        
        .d-center .item {
            margin: 50px 0 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .d-center .item:nth-child(2) {
            flex: 2;
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        
        .d-center .item span {
            color: #999999FF;
        }
        
        .d-center .item p {
            margin-top: 7px;
            font-size: 24px;
            color: #E6A500FF;
            font-weight: 600;
        }
        
        .d-center .item:nth-child(1) p {
            color: #5B78FFFF;
        }
        
        .d-fix .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .item div {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            width: 110px;
        }
        
        .item div span {
            color: #999999FF;
            margin-right: 15px;
            flex: 1;
        }
        
        .item div strong {
            font-size: 20px;
        }
        
        .add {
            background: rgba(63, 110, 255, 0) !important;
            border: 1px solid #3F6EFF;
            border-radius: 6px;
            color: #3F6EFF !important;
        }
        
        .sel-dfx {
            display: flex;
            justify-content: space-between;
            margin: auto;
        }
        
        .sel-mat-top {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        
        .avt {
            background: #3F6EFF !important;
            color: #FFFFFF !important;
        }
        
        .sel-bottom {
            background: #F0F0F0;
            border-radius: 3px;
            cursor: pointer;
            color: #999999;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .sel-bottom:active {
            background: #3377FF;
        }
        
        .card-dth {
            padding: 8px;
        }
        
        .user-name {
            font-size: 16px;
            font-family: 'AliM';
            font-weight: 500;
            color: #0E1525;
            margin-left: 10px;
            text-align: center;
        }
        
        .user {
            display: flex;
            justify-content: space-between;
            width: 96%;
            margin: auto;
            color: #0E1525;
        }
        
        .bg-txt {
            display: flex;
            /* margin-top: 5px; */
            align-items: center;
        }
        
        .str {
            font-size: 12px;
            margin-left: 3px;
            color: #999999;
        }
        
        .d-fix {
            display: flex;
            justify-content: space-between;
            padding-bottom: 20px;
        }
        
        .rig-img img {
            width: 9rem;
            height: 9rem;
        }
        
        .j {
            background: #5B78FF;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .bz {
            background: #22b9ff;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .dy {
            background: #28a745;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .jn {
            background: #F74AFF;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .bg-str {
            font-family: 'AliM';
            text-align: left;
            position: relative;
            font-size: 24px;
        }
        
        .u-rig {
            display: flex;
            justify-content: flex-end;
            padding-top: 10px;
        }
        
        .txt-cen {
            text-align: center;
        }
        
        .list {
            background: white;
            /*height: 100vh;*/
            padding: 20px;
            border-radius: 5px;
        }
        
        .uname {
            font-size: 18px;
            font-family: 'AliM';
            margin-bottom: 15px;
        }
        
        .fix-d {
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
        }
        
        .d-th {
            padding-left: 10px;
            text-align: center;
        }
        
        .numer {
            font-size: 21px;
            font-family: 'AliM';
            font-weight: 600;
        }
        
        .t {
            color: #576AFB;
        }
        
        .d-str {
            font-size: 12px;
            font-family: 'AliM';
            margin-top: 5px;
        }
        
        .d-add {
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
        }
        
        .b {
            color: #FF6739;
        }
        
        .w {
            color: #00A0FF;
        }
        
        .keword {
            display: flex;
        }
        
        .key-input {
            padding-left: 8px;
            border: 1px solid #e2d7d7;
            border-radius: 6px;
            width: 200px;
        }
        
        .key-bottom {
            margin-left: 10px;
            background: #007bff;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 34px;
            line-height: 30px;
            color: white;
            height: 30px;
            margin-top: 5px;
            cursor: pointer
        }
        
        .key-bottom:active {
            background: #71a2d8;
        }
    </style>
    </body>

    </html>